<template>
  <!-- 机构管理 -->
  <el-row class="main" :gutter="20">
    <!-- 左侧树形结构 -->
    <el-col :span="4">
      <el-card class="tree_card">
        <el-tree :data="treeData" :props="defaultProps" accordion @node-click="handleNodeClick" />
      </el-card>
    </el-col>

    <!-- 右侧内容 -->
    <el-col :span="20">
      <!-- 机构信息 -->
      <el-card class="department_card">
        <div slot="header" class="clearfix">
          <span>机构信息</span>
        </div>
        <!-- 表单 -->
        <el-form :inline="true" label-width="90px" :model="formData">
          <el-row>
            <el-form-item label="机构编号">
              <el-input v-model="formData.id" disabled />
            </el-form-item>
            <el-form-item label="机构名称">
              <el-input v-model="formData.name" disabled />
            </el-form-item>
            <el-form-item label="机构类型">
              <el-select v-model="formData.type" disabled style="width:300px">
                <el-option v-for="item in type" :key="item.id" :label="item.label" :value="item.id" />
              </el-select>
            </el-form-item>
          </el-row>

          <el-row>
            <el-form-item label="机构地址" style="width:1300px">
              <el-select v-model="provinceValue" :disabled="!isEdit" clearable placeholder="请选择省" style="width:370px; margin-right:5px">
                <el-option v-for="item in province" :key="item.id" :label="item.name" :value="item.id" />
              </el-select>
              <el-select v-model="cityValue" :disabled="!isEdit || !provinceValue" clearable placeholder="请选择市" style="width:370px; margin-right:5px">
                <el-option v-for="item in city" :key="item.id" :label="item.name" :value="item.id" />
              </el-select>
              <el-select v-model="countyValue" :disabled="!isEdit || !cityValue" clearable placeholder="请选择区" style="width:370px">
                <el-option v-for="item in county" :key="item.id" :label="item.name" :value="item.id" />
              </el-select>
            </el-form-item>
          </el-row>

          <el-row>
            <el-form-item label="详细地址">
              <el-input v-model="formData.address" :disabled="!isEdit" />
            </el-form-item>
            <el-form-item label="经度">
              <el-input v-model="formData.longitude" disabled>
                <i slot="suffix">E</i>
              </el-input>
            </el-form-item>
            <el-form-item label="纬度">
              <el-input v-model="formData.latitude" disabled>
                <i slot="suffix">N</i>
              </el-input>
            </el-form-item>
          </el-row>

          <el-row>
            <el-form-item label="机构负责人">
              <el-input v-model="formData.managerName" :disabled="!isEdit" />
            </el-form-item>
            <el-form-item label="机构电话">
              <el-input v-model="formData.phone" :disabled="!isEdit" />
            </el-form-item>
          </el-row>

          <el-row style="margin-left:600px">
            <el-button v-if="!isEdit" type="primary" :disabled="!formData.id" @click="isEdit = true">编辑</el-button>
            <el-button v-else type="primary" @click="btnSave">保存</el-button>
          </el-row>
        </el-form>
      </el-card>
      <!-- 员工信息 -->
      <el-card class="staff_card">
        <div slot="header" class="clearfix">
          <span>员工信息</span>
        </div>
        <!-- 表格 -->
        <el-table class="staff_table" :data="tableData" :stripe="true" style="width: 100%" :header-cell-style="{ background: '#f8faff', color: '#818693' }">
          <el-table-column prop="date" label="日期" width="180" />
          <el-table-column prop="name" label="姓名" width="180" />
          <el-table-column prop="address" label="地址" />
        </el-table>
        <!-- 分页 -->
        <div class="block">
          <el-pagination
            :current-page="currentPage4"
            :page-sizes="[5, 10, 20, 40]"
            :page-size="100"
            layout="total, sizes, prev, pager, next, jumper"
            :total="400"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </el-card>
    </el-col>
  </el-row>
</template>

<script>
import { getBranchesTree, getBranchesDetail, getBranchesList, editBranches } from '@/api/branches'
import { getCourierList } from '@/api/operationalRange'
export default {
  data() {
    return {
      // 树形数据
      treeData: [],
      defaultProps: {
        children: 'children',
        label: 'name'
      },

      // 表单数据
      formData: {},
      // 表单编辑数据
      formEditData: {},

      type: [
        { id: 1, label: '一级转运' },
        { id: 2, label: '二级转运' },
        { id: 3, label: '网点' }
      ],
      // 省市区选项
      province: [],
      city: [],
      county: [],
      provinceValue: '',
      cityValue: '',
      countyValue: '',

      // 编辑开关
      isEdit: false,

      // 表格数据
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄'
      }],
      currentPage4: 4
    }
  },

  watch: {
    // 省市区数据联动
    provinceValue(val) {
      if (this.isEdit) {
        this.cityValue = ''
        this.countyValue = ''
      }
      this.getBranchesList({ parentId: +val }).then(res => {
        this.city = res
      })
    },
    cityValue(val) {
      if (this.isEdit) {
        this.countyValue = ''
      }
      this.getBranchesList({ parentId: +val }).then(res => {
        this.county = res
      })
    },

    // 对树形结构点击返回数据进行响应处理
    formData(val) {
      try {
        this.provinceValue = val.province ? val.province.id : null
        this.cityValue = val.city ? val.city.id : null
        this.countyValue = val.county ? val.county.id : null
        if (!this.provinceValue) return
        if (!this.cityValue) return
        this.city = this.getBranchesList({ parentId: +val.provinceValue.id })
        this.county = this.getBranchesList({ parentId: +val.cityValue.id })
      } catch (error) {
        return
      }
    }
  },

  async created() {
    this.getBranchesTree()
    this.province = await this.getBranchesList(1)
  },

  methods: {
    // 获取机构树
    async getBranchesTree() {
      this.treeData = JSON.parse(await getBranchesTree())
    },

    // 点击树节点
    async handleNodeClick(data) {
      this.isEdit = false
      // 获取机构详情
      this.formData = await getBranchesDetail(data.id)
      this.formEditData = this.formData
    },

    // 获取行政机构
    async getBranchesList(id) {
      return await getBranchesList(id)
    },

    // 保存编辑
    async btnSave() {
      await editBranches(this.formEditData)
      this.$message.success('更新成功')
      this.isEdit = false
    },

    // 获取快递员分页数据
    async getCourierList() {
      return await getCourierList()
    },

    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
    },

    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
    }
  }
}
</script>

<style lang="scss" scoped>
.el-input{
  width: 300px;
}

i{
  font-style: normal;
  margin-right: 7px;
  color: #818693;
}

.main {
  padding-top: 24px;

  .el-card{
    height: 380px;
    margin-bottom: 20px;

    .staff_table{
      border: 1px solid #ebeef5;
    }

    .block{
      margin: 10px auto;
      text-align: center;
    }
  }

  .tree_card{
    height: 780px;
    margin-bottom: 20px;
  }

  .el-form-item{
    width: 400px;
  }
}
</style>
